<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>好友助力</title>
    <script>
      var width = document.documentElement.clientWidth;
      width = width < 640 ? width : 640;
      var scale = width / 375;
      var css = 'html{font-size:' +
        37.5 * scale +
        'px;}';
      document.write('<style>' + css + '</style>');
    </script>
</head>
<body>
<div id="app" v-cloak >
    <music :music="BgMusic"></music>
    <func-banner :mananger='true'></func-banner>
    <div class="container">
        <form name="form">
            <header>
                <div class="banner_img">
                    <img class="bg_title_banner" :src="BannerStr">
                </div>
                <div class="both"></div>
                <div class="activity_slogan">
                    <h1 id="title">{{Title}}</h1>
                </div>
            </header>
            <main>

                <!-- 助力值 -->
                <div class="help">
                    <div class="help-msg">
                        <div class="help-msg-time">
                            <p class="dynamic_time" v-if="partinstatus != partinstatusall.AtActInActiveEnd">
                                <span>{{countDown.days}}</span>天<span>{{countDown.hours}}</span>时<span>{{countDown.minutes}}</span>分<span>{{countDown.seconds}}</span>秒
                            </p>
                            <p v-if="partinstatus == partinstatusall.AtActInActiveEnd">活动已结束</p>
                        </div>
                        <div class="help-msg-user"  v-if="partinstatus==partinstatusall.JoinDone || partinstatus==partinstatusall.ParterLook || partinstatus==partinstatusall.ParterDone">
                            <img src="/img/activity/collect/friends_help/images_light.gif" alt="">
                            <div class="user-name">{{JoinerMsg.Name}}</div>
                            <div class="user-value">{{JoinerMsg.HelpValue}}</div>
                        </div>
                        <div class="help-msg-user"  v-else>
                            <img src="/img/activity/collect/friends_help/images_light.gif" alt="">
                            <div class="user-value">0</div>
                        </div>
                    </div>
                </div>
                <div class="w">


                    
                    
                    <div class="join_activity">

                        <div class="activity_status" v-if="partinstatus==partinstatusall.JoinJustNow">
                            <div class="long-button"  v-on:click="AlertJoinPop">我要参加</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.JoinDone">
                            <div class="long-button" v-on:click="SendFriend">马上找朋友帮我加油</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.ParterLook">
                            <div class="short-button" v-on:click="TakePartIn">帮他助力</div>
                            <div class="short-button" v-on:click="AlertJoinPop">我也要玩</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.ParterDone">
                            <div class="short-button" v-on:click="TakePartIn">帮TA加油</div>
                            <div class="short-button" v-on:click="BackMine">返回我的</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.AtActInActiveStart">
                            <div class="long-button">活动尚未开始，请先收藏</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.AtActInActiveEnd">
                            <div class="long-button">活动已结束,下次趁早哦</div>
                        </div>
                    </div>
                    <div class="act">
                        <div class="card-body" v-if="Prizes">
                            <h3 v-if="Prizes.PrizeNum">本期奖品
                                <span>{{Prizes.PrizeNum}}</span>份 剩余
                                <span>{{Prizes.PrizeNum - Prizes.LastNum}}</span>份</h3>
                            <p v-if="Prizes.NeedNum">活动时间内助力值达到
                                <span>{{Prizes.NeedNum}}</span></p>
                            <p v-if="Prizes.Name">即可得到
                                <span>{{Prizes.Name}}</span>
                            </p>
                        </div>
                        <g-section  :sedata="Content"></g-section>
                    </div>

                    <div class="activity_des">
                        <div class="activity_des_title">
                            <h2>排行榜单</h2>
                        </div>
                        <div class="activity_des_content">
                            <div class="rank">

                                    <ul>
                                        <li class="rank-join">
                                            <div class="crown">
                                                <img src="/img/activity/collect/friends_help/images_cup_first.png" alt="">
                                            </div>
                                            <div class="joiner-img">
                                                <img src="/img/activity/collect/friends_help/images_help_logo.png" alt="">
                                            </div>
                                            <div class="joiner-msg">
                                                <h5>第1名</h5>
                                                <p>惺惺惜惺惺</p>
                                            </div>
                                            <div class="joiner-suc-time">2017-10-21 23:48</div>
                                        </li>
                                        <li class="rank-join">

                                            <div class="crown">
                                                <img src="/img/activity/collect/friends_help/images_cup_second.png" alt="">
                                            </div>
                                            <div class="joiner-img">
                                                <img src="/img/activity/collect/friends_help/images_help_logo.png" alt="">
                                            </div>
                                            <div class="joiner-msg">
                                                <h5>第2名</h5>
                                                <p>惺惺惜惺惺</p>
                                            </div>
                                            <div class="joiner-suc-time">2017-10-21 23:48</div>
                                        </li>
                                    </ul>


                                    <!--<table>-->
                                        <!--<tr>-->
                                            <!--<th>排名</th>-->
                                            <!--<th>姓名</th>-->
                                            <!--<th>当前票数</th>-->
                                        <!--</tr>-->
                                        <!--<tr v-for="(item,index) in RankMsg">-->
                                            <!--<td>{{index+1}}</td>-->
                                            <!--<td>{{item.Name}}</td>-->
                                            <!--<td>{{item.Ticket}}票</td>-->
                                        <!--</tr>-->
                                    <!--</table>-->
                            </div>

                        </div>

                        <div class="load">数据加载中,请稍后</div>
                    </div>
                </div>
            </main>
        </form>
    </div>



    <div class="mask gold-mask">
        <div class="gold-coin" id="gold">
            <div class="ignoreMe"><img src="/img/activity/collect/friends_help/images_popup_coin1.png" alt=""></div>
            <div class="ignoreMe"><img src="/img/activity/collect/friends_help/images_popup_coin2.png" alt=""></div>
            <div class="ignoreMe"><img src="/img/activity/collect/friends_help/images_popup_coin3.png" alt=""></div>
        </div>
    </div>
    <!-- 助力成功加1-->
    <div class="help-pop">
        <p>+1</p>
    </div>
    <!-- 报名弹窗 -->
    <user-join :othermsg="Other" v-on:join="UserJoinAct" v-on:back="BackMine"></user-join>

    <!-- 报名成功以及提示商家分享方法 -->
    <notice-pop :actstatus="ActStatus"></notice-pop>

    <!-- 分享标题以及副标题处弹窗 -->
    <share-pop :sharemsg="ShareMsg"></share-pop>
    <add-msg :mobile="Mobile"></add-msg>
</div>
</body>
</html>